<template>
  <div class="page">
    <div class="task-list">
      <div class="task-header">
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" @click="openAddPlatformModal">添加平台</a-button>
          </a-col>
        </a-row>
      </div>
      <div class="task-table">
        <a-table :columns="columns" :data-source="data">
          <template #a="{ index }">
            <span>{{ index + 1 }}</span>
          </template>
          <template #d="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #e="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #f="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #g="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #active="{ record }">
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handleOption(record)">标签管理</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定删除当前这个指标?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirmDelete(record)"
              @cancel="cancelDelete"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
      <div>
        <AddPlatformModal :visible="addPlatformVisible" @cancelFn="closeAddPlatformModal" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
// import { Moment } from "moment";
import { TableDataType } from "@/shims/globe";
import AddPlatformModal from "./components/addPlatform.vue";
import { columns } from "./config";

export default defineComponent({
  components: {
    AddPlatformModal
  },
  setup() {
    const router = useRouter();
    const formState = reactive({
      name: ""
    });
    const addPlatformVisible = ref<boolean>(false);
    const openAddPlatformModal = () => {
      console.log("----");
      addPlatformVisible.value = true;
    };
    const closeAddPlatformModal = () => {
      addPlatformVisible.value = false;
    };
    const data: TableDataType[] = [
      {
        key: "1",
        b: "数坊",
        c: "京东",
        d: "京东数坊",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34"
      },
      {
        key: "2",
        b: "云图",
        c: "抖音",
        d: "抖音云图",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34"
      },
      {
        key: "3",
        b: "数据银行",
        c: "淘宝",
        d: "阿里数据银行",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34"
      },
      {
        key: "4",
        b: "策略中心",
        c: "淘宝",
        d: "阿里策略中心",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34"
      }
    ];

    const handleOption = (record: any) => {
      router.push({
        name: "TagDetails",
        query: {
          ...record
        }
      });
    };

    const confirmDelete = (record: any) => {
      console.log(record);
    };
    const cancelDelete = (record: any) => {
      console.log(record);
    };
    return {
      formState,
      data,
      columns,
      addPlatformVisible,
      handleOption,
      confirmDelete,
      cancelDelete,
      openAddPlatformModal,
      closeAddPlatformModal
    };
  }
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
